<template>
    <div class="" id="PeriodReview">
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="primary">阶段点评审</el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>

        <el-row>      
            <el-col :xs="24" :sm="24" :lg="24">
                <datepickersummary></datepickersummary>
            </el-col>  
        </el-row>
        
        <template v-if="!filters.radio">
            <div class="summary-tag">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.processCoverage"                         
                            :label_data="getNum(deptData.period_flow_cover_rate)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.selfPass"                         
                            :label_data="getNum(deptData.selfcheck_pass_rate)"
                            :label_import="'big'"
							:label_avg="standardKPI.period_selfcheckpassrate_avg_project"
							:label_now="deptData.selfcheck_pass_rate"
							:label_good="kpi.period_selfcheckpassrate_avg_project"
							:label_precent="'precent'"
							:nessary="true">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.processCompliance"                         
                            :label_data="getNum(deptData.period_flow_conformity)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewPlanDeviation4"                         
                            :label_data="getNum(deptData.period_plan_deviation_rate_tg4)">
                        </LabelGrid>
                    </el-col>                    
                </el-row>

                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewPlanDeviation5"                         
                            :label_data="getNum(deptData.period_plan_deviation_rate_tg5)">
                        </LabelGrid>
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewOne"                         
                            :label_data="getNum(deptData.period_review_pass_rate)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewFindProblemClose"                         
                            :label_data="getNum(deptData.period_issue_closed_rate)">
                        </LabelGrid>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div class="ibox">
                        <div class="ibox-content">
                            <el-row v-if="projectinfo">
                                <el-col :xs="24" :sm="24" :lg="12">
                                    <el-row class="mb-0">
                                        <el-col class="text-sm-right" :xs="24" :sm="24" :lg="8">
                                            <div class="text-line">当前阶段:</div>
                                        </el-col>
                                        <el-col class="text-sm-left" :xs="24" :sm="24" :lg="16">
                                            <div class="mb-1" v-show="projectinfo.project_cur_phase !== 'Undefined'">
                                                <span class="label label-primary">{{ projectinfo.project_cur_phase }}</span>            
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-row class="mb-0">
                                        <el-col class="text-sm-right" :xs="24" :sm="24" :lg="8">
                                            <div class="text-line">开始时间:</div>
                                        </el-col>
                                        <el-col class="text-sm-left" :xs="24" :sm="24" :lg="16">
                                            <div class="mb-1">
                                                {{ projectinfo.starttime }}
                                            </div>
                                        </el-col>                                   
                                    </el-row>
                                    <el-row class="mb-0">
                                        <el-col class="text-sm-right" :xs="24" :sm="24" :lg="8">
                                            <div class="text-line">结束时间:</div>
                                        </el-col>
                                        <el-col class="text-sm-left" :xs="24" :sm="24" :lg="16">
                                            <div class="mb-1">
                                                {{ projectinfo.endtime }}
                                            </div>
                                        </el-col>                                                                      
                                    </el-row>
                                </el-col>
                                <el-col id="cluster_info" :xs="24" :sm="24" :lg="12">
                                    <el-row class="mb-0">
                                        <el-col class="text-sm-right" :xs="24" :sm="24" :lg="8">
                                            <div class="text-line">阶段名称:</div>
                                        </el-col>
                                        <el-col class="text-sm-left" :xs="24" :sm="24" :lg="16">
                                            <div class="mb-1">
                                                {{ projectinfo.phasename }}
                                            </div>
                                        </el-col>                                                                      
                                    </el-row>                               
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <el-row class="mb-0">
                                        <el-col class="text-sm-right" :xs="24" :sm="24" :lg="4">
                                            <div class="text-line">项目进度:</div>
                                        </el-col>
                                        <el-col class="text-sm-left" :xs="24" :sm="24" :lg="20">
                                            <div>
                                                <el-progress :text-inside="true" :stroke-width="18" :percentage="complete"></el-progress>
                                            </div>
                                        </el-col>                                                                      
                                    </el-row>                              
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24" v-if="periodcheckrate.length">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h4>阶段评审详情</h4>
                        </div>
                        <div class="ibox-content">
                            <el-row class="m-t-sm">
                                <el-col :xs="24" :sm="24" :lg="24">
                                    <el-tabs v-model="activeName" type="card">
                                        <el-tab-pane v-for="(phase, index) in phases" :key="'f' + index" :label="phase.p_phase" :name="'f' + index">
                                            <el-row>
                                                <el-col :xs="24" :sm="24" :lg="24">
                                                    <h4 class="color-primary">
                                                        阶段自检通过率  <el-button type="primary" size="mini">总计: {{getPercentage(periodcheckrate[index].checkrate)}}</el-button>
                                                    </h4>
                                                    <el-table :data="periodreview[index]" border style="width: 100%">
                                                        <el-table-column
                                                        prop="p_domain"
                                                        label="阶段领域"
                                                        width="300">
                                                            <template slot-scope="scope">
                                                                <el-button type="success" size="mini">{{ scope.row.p_domain }}</el-button>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_selfcheckpassrate"
                                                        label="领域自检通过率"
                                                        width="300"> 
                                                            <template slot-scope="scope"> 
                                                                <div>{{ getNum(scope.row.p_selfcheckpassrate) }}</div> 
                                                            </template>                                                               
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_active"
                                                        label="启用自检条数"
                                                        width="300">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_passcount"
                                                        label="通过自检条数"
                                                        width="300">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_selfcheckcount"
                                                        label="自检总条数"
                                                        >
                                                        </el-table-column>
                                                    </el-table>
                                                </el-col>

                                                <el-col class="mar-top" :xs="24" :sm="24" :lg="24">
                                                    <h4 class="color-primary">
                                                        阶段评定结果  <el-button type="primary" size="mini">总计: {{getPercentage(periodcheckrate[index].checkrate)}}</el-button>
                                                    </h4>

                                                    <el-table :data="periodresult[index]" border style="width: 100%">
                                                        <el-table-column
                                                        prop="p_status"
                                                        label="状态"
                                                        width="250">
                                                            <template slot-scope="scope">
                                                                <el-button v-show="scope.row.p_status" type="success" size="mini">{{ scope.row.p_status }}</el-button>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_phase"
                                                        label="阶段"
                                                        width="150">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_endtime"
                                                        label="结束时间"
                                                        width="150">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_qaopinion"
                                                        label="阶段评定结果"
                                                        width="200">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_additionalinfo"
                                                        label="附加说明"
                                                        >
                                                        </el-table-column>
                                                    </el-table>
                                                </el-col>

                                                <el-col class="mar-top" :xs="24" :sm="24" :lg="24">
                                                    <h4 class="color-primary">项目阶段质量达标</h4>

                                                    <el-table :data="periodquality[index]" border style="width: 100%">
                                                        <el-table-column
                                                        prop="p_index_description"
                                                        label="质量目标自检项"
                                                        width="400">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_target"
                                                        label="目标"
                                                        width="250">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_upper_limit"
                                                        label="上限"
                                                        width="200">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_lower_limit"
                                                        label="下限"
                                                        width="200">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_actual_value"
                                                        label="实际值"
                                                        width="200">
                                                        </el-table-column>
                                                        <el-table-column
                                                        prop="p_explanation"
                                                        label="附加说明"
                                                        >
                                                        </el-table-column>
                                                    </el-table>
                                                </el-col>
                                            </el-row>
                                        </el-tab-pane>                        
                                    </el-tabs>                                                    
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <div class="content bgColor">
                    <el-row>
                        <el-col :xs="24" :sm="24" :lg="24">
                            <ve-line
                                :data="periodSelfCheckRateChartData"
                                :settings="periodSelfCheckRateChartSettings">
                            </ve-line>
                        </el-col>
                    </el-row>
                </div>
            </el-row>
        </template>

        <template v-else>
            <div class="summary-tag">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.processCoverage"                         
                            :label_data="getNum(deptData.period_flow_cover_rate)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.selfPass"                         
                            :label_data="getNum(deptData.selfcheck_pass_rate)"
                            :label_import="'big'"
							:label_avg="standardKPI.period_selfcheckpassrate_avg_project"
							:label_now="deptData.selfcheck_pass_rate"
							:label_good="kpi.period_selfcheckpassrate_avg_project"
							:label_precent="'precent'"
							:nessary="true">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.processCompliance"                         
                            :label_data="getNum(deptData.period_flow_conformity)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewPlanDeviation4"                         
                            :label_data="getNum(deptData.period_plan_deviation_rate_tg4)">
                        </LabelGrid>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewPlanDeviation5"                         
                            :label_data="getNum(deptData.period_plan_deviation_rate_tg5)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewOne"                         
                            :label_data="getNum(deptData.period_review_pass_rate)">
                        </LabelGrid>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="6">
                        <LabelGrid 
                            :label_info="deptInfo.reviewFindProblemClose"                         
                            :label_data="getNum(deptData.period_issue_closed_rate)">
                        </LabelGrid>
                    </el-col>
                </el-row>
            </div>

            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="10">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">各阶段项目占比</div>
                            <el-row>
                                <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    
                    <div class="content bgColor">
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24">
                                <ve-pie :data="pieChartData"></ve-pie>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>

                <el-col :xs="24" :sm="24" :lg="14">
                    <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="ibox-title pad">平均自检通过率</div>
                            <el-row>
                                <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                    <div class="content bgColor">
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24">
                                <ve-histogram :data="gramChartData" :settings="gramChartSettings"></ve-histogram>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>

            <!-- el-tab切换 -->
            <div class="tab marT">
                <el-row :gutter="30">
                    <el-col :xs="24" :sm="24" :lg="12">                        
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                            <div style="float: left; padding: 10px 0">阶段点评审</div>
                            <el-radio-group v-model="importedSelected" style="float: right; padding: 3px 0" size="mini">
                                <el-radio-button label="阶段点自检通过率"></el-radio-button>
                                <el-radio-button label="评审一次通过率"></el-radio-button>
                            </el-radio-group>
                            </div>
                            <div v-if="importedSelected === '阶段点自检通过率' && rankChartDataAll.length">
                            <el-table
                                :data="rankChartDataAll.length > 0 ? rankChartDataAll.slice((tablecurrent-1)*tablesize,tablecurrent*tablesize):rankChartDataAll"
                                style="width: 100%"
                                :height="'500'"
                                max-height="500">
                                <el-table-column align="center" label="排名">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && tablecurrent === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && tablecurrent === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && tablecurrent === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + tablesize*(tablecurrent - 1)}} </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称">
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="selfcheck_pass_rate"
                                label="平均自检通过率"
                                :formatter="formatter_rate"
                                >
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                :page-size="tablesize"
                                background                              
                                @size-change="tableSizeChange"
                                @current-change="tableCurrentImportDeptChange"
                                :current-page="tablecurrent"                               
                                layout="prev, pager, next"
                                style="text-align: center;margin-top: 10px"
                                :total="tabletotal"
                                >
                            </el-pagination>
                            </div>
                            <div v-else>
                            <el-table
                                :data="rankChartDataAll2"
                                style="width: 100%"
                                :height="'500'"
                                max-height="500">
                                <el-table-column align="center" label="排名">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && tablecurrent2 === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && tablecurrent2 === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && tablecurrent2 === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + tablesize2*(tablecurrent2 - 1)}} </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称">
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="selfcheck_pass_rate"
                                label="评审一次通过率"
                                :formatter="formatter_rate"
                                >
                                </el-table-column>
                            </el-table>
                            <el-pagination                               
                                :page-size="tablesize2"
                                background                              
                                @size-change="tableSizeChange2"
                                @current-change="tableCurrentImportDeptChange2"
                                :current-page="tablecurrent2"                               
                                layout="prev, pager, next"
                                style="text-align: center;margin-top: 10px"
                                :total="tabletotal2">
                            </el-pagination>
                            </div>
                        </el-card>

                        <!-- <el-tabs type="border-card" v-model="activeName2">
                            <el-tab-pane name="0" label="阶段点平均自检通过率排名">
                                <ve-bar
                                :data="rankChartDataAll"                                                                                          
                                height="350px"  
                                ref="line0"                                                        
                                :data-empty="dataEmpty1"></ve-bar>
                            </el-tab-pane>
                            <el-tab-pane name="1" label="评审计划偏差率排名">
                                 <ve-bar
                                :data="rankChartData"                                                                                     
                                height="350px"  
                                ref="line1"                                                        
                                :data-empty="dataEmpty1"></ve-bar>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="流程符合度排名">
                                 <ve-bar
                                :data="rankChartData"                                                                                               
                                height="350px"  
                                ref="line2"                                                        
                                :data-empty="dataEmpty1"></ve-bar>
                            </el-tab-pane>
                            <el-tab-pane name="3" label="评审一次通过率排名">
                                 <ve-bar
                                :data="rankChartData"                                                                                
                                height="350px"  
                                ref="line3"                                                        
                                :data-empty="dataEmpty1"></ve-bar>
                            </el-tab-pane>
                            <el-tab-pane name="4" label="评审发现问题关闭率排名">
                                 <ve-bar
                                :data="rankChartData"                                                                                
                                height="350px"  
                                ref="line4"                                                        
                                :data-empty="dataEmpty1"></ve-bar>
                            </el-tab-pane>
                        </el-tabs> -->
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="12">                        
                        <el-card class="box-card m-b" shadow="never">
                            <div slot="header" class="clearfix" style="vertical-align:middle">
                            <div style="float: left; padding: 10px 0">评审问题</div>
                            <el-radio-group v-model="importedSelected2" style="float: right; padding: 3px 0" size="mini">
                                <el-radio-button label="评审计划偏差率"></el-radio-button>
                                <el-radio-button label="评审发现问题关闭率"></el-radio-button>
                            </el-radio-group>
                            </div>
                            <div v-if="importedSelected2 === '评审计划偏差率'">
                            <el-table
                                :data="rankChartDataAll3"
                                style="width: 100%"
                                :height="'500'"
                                max-height="500">
                                <el-table-column align="center" label="排名">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && tablecurrent2 === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && tablecurrent2 === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && tablecurrent2 === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + tablesize2*(tablecurrent2 - 1)}} </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称">
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="selfcheck_pass_rate"
                                label="评审计划偏差率"
                                :formatter="formatter_rate"
                                >
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                :page-size="tablesize2"
                                background                              
                                @size-change="tableSizeChange2"
                                @current-change="tableCurrentImportDeptChange2"
                                :current-page="tablecurrent2"                               
                                layout="prev, pager, next"
                                style="text-align: center;margin-top: 10px"
                                :total="tabletotal2"
                                >
                            </el-pagination>
                            </div>
                            <div v-else>
                            <el-table
                                :data="rankChartDataAll4"
                                style="width: 100%"
                                :height="'500'"
                                max-height="500">
                                <el-table-column align="center" label="排名">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index=== 0 && tablecurrent2 === 1" type="danger" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 1 && tablecurrent2 === 1" type="warning" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <el-tag v-else-if="scope.$index=== 2 && tablecurrent2 === 1" type="primary" size="medium" >
                                        TOP{{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else> {{scope.$index + 1 + tablesize2*(tablecurrent2 - 1)}} </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="project_name"
                                label="项目名称">
                                </el-table-column>
                                <el-table-column
                                align="center"
                                prop="selfcheck_pass_rate"
                                label="评审发现问题关闭率"
                                :formatter="formatter_rate"
                                >
                                </el-table-column>
                            </el-table>
                            <el-pagination                               
                                :page-size="tablesize2"
                                background                              
                                @size-change="tableSizeChange2"
                                @current-change="tableCurrentImportDeptChange2"
                                :current-page="tablecurrent2"                               
                                layout="prev, pager, next"
                                style="text-align: center;margin-top: 10px"
                                :total="tabletotal2">
                            </el-pagination>
                            </div>
                        </el-card>                        
                    </el-col>
                </el-row>
            </div>

             <!-- 折线图 -->
            <!-- <div class="line-box marT">
                <el-row>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-row class="bgColor">
                            <el-col :xs="24" :sm="24" :lg="24">
                                <div class="ibox-title pad">阶段点趋势</div>
                                <el-row>
                                    <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-tabs type="border-card" v-model="activeName3">
                            <el-tab-pane name="0" label="流程符合度趋势">
                                <ve-line ref="vline0" :data-empty="dataEmpty1" :data="lineChartData"></ve-line>
                            </el-tab-pane>
                            <el-tab-pane name="1" label="评审一次通过率">
                                 <ve-line ref="vline1" :data-empty="dataEmpty1" :data="lineChartData"></ve-line>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="评审发现问题关闭率">
                                 <ve-line ref="vline2" :data-empty="dataEmpty1" :data="lineChartData"></ve-line>
                            </el-tab-pane>                            
                        </el-tabs>
                    </el-col>
                </el-row>              
            </div> -->

            <!-- 项目列表 -->
            <div class="project-content">
                <el-row class="bgColor marT">
                    <el-col :xs="24" :sm="24" :lg="24">
                        <div class="ibox-title pad">项目列表</div>

                        <div class="table mar">
                            <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%">
                                <el-table-column
                                    align="center"
                                    type="index"
                                    prop="index"
                                    label="编号"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ scope.$index + 1 + listsize*(listcurrent - 1) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="project_name"
                                    label="项目名称"
                                    >
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="selfcheck_pass_rate"
                                    label="平均自检通过率"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row.selfcheck_pass_rate) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG0"
                                    label="TG0"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row.TG0) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG1"
                                    label="TG1"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row.TG1) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG2"
                                    label="TG2"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row.TG2) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG3.1"
                                    label="TG3.1"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG3.1']) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG3.2"
                                    label="TG3.2"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG3.2']) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG4.1"
                                    label="TG4.1"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG4.1']) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG4.2"
                                    label="TG4.2"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG4.2']) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG5"
                                    label="TG5"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG5']) }}</span>    
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    align="center"
                                    prop="TG6"
                                    label="TG6"
                                    >
                                    <template slot-scope="scope">
                                        <span>{{ getPercent(scope.row['TG6']) }}</span>    
                                    </template>
                                </el-table-column>                                
                            </el-table>
                            <el-pagination                               
                                :page-size="listsize"
                                background                              
                                @size-change="listSizeChange"
                                @current-change="listCurrentImportDeptChange"
                                :current-page="listcurrent"                               
                                layout="prev, pager, next"
                                style="text-align: center;margin-top: 10px"
                                :total="listtotal">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
</template>
<script>
import ComingSoon from '@/components/qa/ComingSoon.vue';
import Profile from '@/components/qa/Profile.vue';
import Chart12 from '@/components/qa/Chart12.vue';
import { getToken } from '@/utils/auth'
import DatePickerSummary from '@/views/summary/DatePickerSummary'
import { mapState } from 'vuex'
import { getHeader } from '@/app.config';
import LabelGrid from '@/components/qa/Label.vue'
import { getKpi2 } from '@/api/kpi'
import 'v-charts/lib/style.css'
import 'echarts/lib/component/dataZoom'

export default {
    name: 'PeriodReview',
    components: {
        ComingSoon,
        Chart12,
        LabelGrid,
        datepickersummary: DatePickerSummary
    },
    computed: {
        ...mapState({
            filters: state => state.filters,
            allDepartmentList: state => state.allDepartmentList,
            standardKPI: state => state.standardKPI
        })
    },
    data () {
        this.gramChartSettings = {
            labelMap: {
                selfcheck_pass_rate: '自检通过率(%)'
            }
        }
        return {
            kpi: {},
            deptInfo: {
                // 流程覆盖率
                processCoverage: {
                    label_hname: '流程覆盖率',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 自检通过率
                selfPass: {
                    label_hname: '自检通过率',
                    label_header: 'AVG',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 流程符合度
                processCompliance: {
                    label_hname: '流程符合度',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 评审计划偏差率
                reviewPlanDeviation4: {
                    label_hname: '评审计划偏差率tg4',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 评审计划偏差率
                reviewPlanDeviation5: {
                    label_hname: '评审计划偏差率tg5',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 评审一次通过率
                reviewOne: {
                    label_hname: '评审一次通过率',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                },
                // 评审发现问题关闭率
                reviewFindProblemClose: {
                    label_hname: '评审发现问题关闭率',
                    label_sname: '百分比',
                    label_unit: '(%)',
                    label_class: 'success'
                }
            },
            deptData: {},
            tablesize: 10,
            tablecurrent: 1,
            tabletotal: 0,
            tablesize2: 10,
            tablecurrent2: 1,
            tabletotal2: 0,
            listsize: 10,
            listcurrent: 1,
            listtotal: 0,
            rankChartDataAll2: [],
            rankChartDataAll3: [],
            rankChartDataAll4: [],
            phases: [],
            periodreview: [],
            periodresult: [],
            periodquality: [],
            periodcheckrate: [],
            pieChartData: {
                columns: ['phase', 'count'],
                rows: [
                    
                ]
            },
            lineChartData: {
                columns: ['日期', '符合度'],
                rows: [
                    
                ]
            },
            rankChartDataAll: {
                
            },
            rankChartData: {
                columns: ['', ''],
                rows: [
                   
                ]
            },
            // 项目阶段点评审自检通过率各阶段折线图表数据
            periodSelfCheckRateChartData: {
                columns: ['phase', 'checkrate'],
                rows: []
            },
            // 项目阶段点评审自检通过率各阶段折线图表配置
            periodSelfCheckRateChartSettings: {
                metrics: ['checkrate'],
                yAxisType: ['percent'],
                dimension: ['phase'],
                labelMap: {
                    checkrate: '阶段点评审自检通过率'
                }
            },
            dataEmpty1: false,
            activeName2: 0,
            activeName3: 0,
            importedSelected: '阶段点自检通过率',
            importedSelected2: '评审计划偏差率',
            legend: true,
            // lineDataZoom:[{
            //     type: 'slider',
            //     start: 50,
            //     end: 100
            // }],
            gramChartData: {
                columns: ['phase', 'selfcheck_pass_rate'],
                rows: [
                    
                ]
            },
            tableData: [],
            user: JSON.parse(localStorage.getItem('user')),
            project_id: '',
            activeName: 'f0',
            projectinfo: [],
            complete: 0,
            num: 0,
            chart_info: {
                date: 1,
                labels: [],
                linechart1: {
                    id: ['div_2','canvas_2'],
                    type: 'line',         
                    title: '阶段自检通过率趋势',
                    datasets: [
                        {
                            label: "阶段自检通过率趋势",
                            backgroundColor: 'rgba(26,179,148,0)',
                            borderColor: "rgba(26,179,148,0.7)",
                            pointBackgroundColor: "rgba(26,179,148,1)",
                            pointBorderColor: "#fff",
                            data: []
                        },
                    ],
                },
            }
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.get_data();
            },
            deep: true,
        },
        activeName2(v) {
            this.$nextTick(() => {
				this.$refs[`line${v}`].echarts.resize()
			})
        },
        activeName3(v) {
            this.$nextTick(() => {
				this.$refs[`vline${v}`].echarts.resize()
			})
        }
    },
    methods: {
        getLabelKpi(type) {
            getKpi2(type).then(res => {
                if (res.status == 200) {
                    if (res.data.code === 200) {
                        this.kpi = res.data.avg_kpi
                    }
				}
            })
        },
        filterObject() {
            this.get_data()
        },
        formatter_rate(row, column, cellValue, index) {
            var str = Number(cellValue*100).toFixed(2);
            str += "%";
            return str;
        },
        tableSizeChange(val) {
            this.tablesize = val
        },
        tableCurrentImportDeptChange(val) {
            this.tablecurrent = val
        },
        tableSizeChange2(val) {
            this.tablesize2 = val
        },
        tableCurrentImportDeptChange2(val) {
            this.tablecurrent2 = val
        },
        listSizeChange(val) {
            this.listsize = val
        },
        listCurrentImportDeptChange(val) {
            this.listcurrent = val
            this.getKpi()
        },
        getNum(num) {
            let number
            num ? number = (num*100).toFixed(2) + '%' : number = '0.00%'
            return number
        },
        getFix(data) {
            if (null == data || "undefined" == typeof(data) || "" == data) {
                return 0
            } else {
                return data
            }
		},
        getPercent(num) {          
            return (num * 100).toFixed(2) + '%'
        },
        get_data() {
            if(!this.filters.radio) {
                this.getProjSummary()
                this.getCurPhase(this.filters.projectId, getToken())
                // this.getPeriodReview(this.filters.projectId)
                // this.getPeriodResult(this.filters.projectId)
                this.getPhases(this.filters.projectId)
            } else {
                this.getLabelKpi('PeriodReview')
                this.getDeptSummary()
                this.getdeptList()
                this.getCheckself()
                this.getAllRank()
                this.getKpi()
            }
        },
        getDeptSummary() {
            this.deptData = {}
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/dept-summary-by-phase`, data, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.deptData = res.data
                        }
                    }
                })
        },
        getProjSummary() {
            this.deptData = {}
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/projperiodphasesumlabel?projectId=${this.filters.projectId}`, {headers: getHeader()})
                .then(res => {
                    if(res.status == 200) {
                        if(res.data.code == 200) {
                            this.deptData = res.data
                        }
                    }
                })
        },
        getPostParams(array) {
            let newArray = []
            if(array.length) {
                array.forEach((val) => {
                    newArray.push(val[1])
                })
            }
            return newArray
        },
        getdeptList() {
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            this.$axios.post(`api/qa/dept-projratio-by-phase?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res.data)
                       this.pieChartData.rows = res.data.ratio_list
                   }
                }
            })
        },
        getCheckself() {
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            this.$axios.post(`api/qa/dept-proj-selfcheckpassrate-by-phase?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       //console.log(res.data)
                       res.data.phase_list.forEach((val) => {
                           if(val.selfcheck_pass_rate) {
                               let num = Number(val.selfcheck_pass_rate*100).toFixed(2)
                               val.selfcheck_pass_rate = num
                           }
                       })
                    //    console.log(res.data.phase_list)
                       this.gramChartData.rows = res.data.phase_list                      
                   }
                }
            })
        },
        getAllRank() {
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            this.$axios.post(`api/qa/dept-projrank-by-selfcheckpassrate?time=${this.filters.time}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       console.log(res.data)
                        this.rankChartDataAll = res.data.rank_list  
                        this.tabletotal = res.data.rank_list.length                 
                   }
                }
            })
        },
        getKpi() {
            let data = {}
            if(this.filters.departList.length) {           
                data = {departmentIds: this.filters.departmentId}
            } else {             
                data = {departmentIds: this.allDepartmentList.allDepartmentList}              
            }
            //.length > 0 ? tableData.slice((listcurrent-1)*listsize,listcurrent*listsize):tableData
            this.$axios.post(`api/qa/dept-proj-period-review-kpi?time=${this.filters.time}&page=${this.listcurrent}`, data, {headers: getHeader()}).then((res) => {
                if(res.status == 200) {
                   if(res.data.code == 200) {
                       console.log(res.data)
                        this.tableData = res.data.project_kpi_list   
                        this.listtotal = res.data.count                 
                   }
                }
            })
        },
        getCurPhase: function(project) {
            this.$axios.get('/api/qa/projperiodcurphase?projectId='+project, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        this.projectinfo = response.data.projectinfo;
                        this.getComplete();
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getComplete: function() {
            var complete = this.projectinfo.completerate;
            this.complete = complete*100;
        },
        getPercentage: function(data) {
            var str=Number(data*100).toFixed(0);
            str+="%";
            return str;
        },
        getQAOpinion: function(key) {
            console.log(key);
            var opinion = ''
            if (this.periodresult) {
                if (this.periodresult[key]) {
                    opinion = this.periodresult[key]['p_qaopinion']
                }
            }
            console.log(opinion);
            return opinion;
        },
        getEndTime: function(key) {

        },
        getAddInfo: function(key) {

        },
        getPhases: function(project) {
            this.$axios.get(process.env.VUE_APP_KANBAN_HOST+'/api/qa/projperiodphase?projectId='+project, {headers: getHeader()})
                .then((response) => {                    
                    if (response.status == 200) {
                        if(response.data.code === 200) {
                            this.phases = response.data.phase
                            this.periodreview = response.data.periodreview
                            this.periodresult = response.data.periodresult
                            this.periodcheckrate = response.data.periodcheckrate
                            // this.periodProject.rows = response.data.periodcheckrate
                            this.periodquality = response.data.periodquality
                            this.periodSelfCheckRateChartData.rows = response.data.periodcheckrate
                        }                      
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        table: function(index) {
            this.num = index;
            console.log(this.num);
        }
    
    },
    mounted: function() {       
        this.get_data()         
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    #PeriodReview{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .mar-top{
        margin-top: 20px;
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .color-primary{
        color: #409EFF;
    }
    .text-sm-right{
        font-weight: 700;
        font-size: 14px;
    }
    .label {
        background-color: #d1dade;
        color: #5e5e5e;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 600;
        padding: 3px 8px;
        text-shadow: none;
        border-radius: 0.25em;
        line-height: 1;
        white-space: nowrap;
    }
    .nav .label, .ibox .label {
        font-size: 10px;
    }
    .label-primary, .badge-primary {
        background-color: #1ab394;
        color: #FFFFFF;
    }
    .text-line{
        text-align: right;
        margin-right: 35px;
        margin-bottom: 6px;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
    .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
    .table{
        padding-bottom: 10px;
    }
</style>